export default class LineBase {
  constructor(data = {}) {
    this.data = data
    this.yAxisName = data.yAxisName || '辆'
    this.lineColor = data.lineColor || '#387AEC'
    this.dataZoomShow = data.dataZoomShow ??= this.data.xaxis.length > 18
    this.defaultColor = {
      areaStyle: ['rgba(56, 122, 236, 1)', 'rgba(80, 173, 251, 0)'],
      itemStyleColor: '#397CED',
      lineStyle: ['#387AEC', '#50ADFB']
    }
    this.showTooltipName = data.showTooltipName || false;
    this.tooltipName = data.tooltipName || "";
    this.color = data.color || this.defaultColor
    return this.getChartConfig()
  }

  getDataZoom() {
    const dataZoom = {
      show: this.dataZoomShow,
      handleSize: 0,
      height: 'w(8)',
      type: 'slider',
      zoomLock: true,
      brushSelect: false,
      filterMode: 'filter',
      fillerColor: 'rgba(144, 147, 153, .3)',
      backgroundColor: 'rgba(56, 68, 115, 0.6)',
      borderColor: 'rgba(56, 68, 115, 0.6)',
      realtime: true,
      left: 0,
      bottom: 0,
      width: '100%',
      showDataShadow: false,
      showDetail: false,
      startValue: 0,
      moveOnMouseWheel: false,
      moveOnMouseMove: false,
      rangeMode: ['value', 'value'],
      xAxisIndex: [0]
    }

    if (this.dataZoomShow) {
      dataZoom.endValue = 10
    }

    return dataZoom
  }

  getChartConfig() {
    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(49,83,162,0.8)',
        borderWidth: 0,
        className: 'tooltip-back-bar',
        formatter: (params) => {
          let result = "";
          params.forEach((item, index) => {
            let dom = "";
            if (this.showTooltipName) {
              dom = `<div style="color: #D3DFFF;">${item.name}</div><span style="color:rgba(211,223,255,0.7)">${this.tooltipName || item.marker}</span><span style="color:rgba(211,223,255,0.7); margin-left: 5px">${item.value?.toLocaleString()}</span>`
            } else {
              dom = `<span style="color:#D3DFFF;">${item.value?.toLocaleString()}</span>`;
            }
            result += dom;
          })
          return result
        },
        textStyle: {
          color: '#D3DFFF',
          fontSize: 'w(12)',
          fontFamily: 'DIN Alternate, DIN Alternate',
          fontWeight: 'bold'
        },
        axisPointer: {
          lineStyle: {
            type: 'solid',
            color: 'rgba(54, 134, 255, 1)'
          }
        }
      },
      grid: {
        // left: 'w(30)',
        top: '15%',
        right: '1%',
        bottom: this.dataZoomShow ? '11%' : '11%'
      },
      xAxis: {
        data: this.data?.xaxis || [],
        offset: 0,
        axisLine: {
          show: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#D3DFFF',
          fontSize: 'w(12)',
          rotate: 0,
          fontFamily: 'PingFang SC-Regular'
        }
      },
      yAxis: {
        offset: 0,
        min: 0,
        name: this.yAxisName,
        nameGap: 25,
        nameTextStyle: {
          color: 'rgba(224,224,224,0.5)',
          fontSize: 'w(14)',
          padding: [0, 0, 'h(-10)', 'w(-27)'],
          align: 'left'
        },
        axisLabel: {
          align: 'right',
          color: '#D3DFFF',
          fontSize: 'w(12)',
          fontFamily: 'PingFang SC-Regular',
          // padding: [0, 'w(-22)'],
          margin: 5,
          showMaxLabel: true
        },
        axisLine: {
          show: true
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#394159',
            type: 'solid'
          }
        },
        scale: true
      },
      dataZoom: this.getDataZoom(),
      series: [
        {
          type: 'line',
          name: '',
          data: this.data?.data || [],
          yAxisIndex: 0,
          symbolSize: 'w(7)',
          smooth: true,
          areaStyle: {
            opacity: 0.2,
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.color.areaStyle?.[0]
                },
                {
                  offset: 1,
                  color: this.color.areaStyle?.[1] || this.color.areaStyle?.[0]
                }
              ],
              globalCoord: false
            }
          },
          itemStyle: {
            show: true,
            color: this.color.itemStyleColor,
            borderWidth: 'w(1)',
            borderColor: '#223C75'
          },
          lineStyle: {
            width: 'w(2)',
            // color: {
            //   x: 0,
            //   y: 0,
            //   x2: 1,
            //   y2: 1,
            //   colorStops: [
            //     {
            //       offset: 0,
            //       color: this.color.lineStyle?.[0],
            //     },
            //     {
            //       offset: 1,
            //       color: this.color.lineStyle?.[1] || this.color.areaStyle?.[0],
            //     },
            //   ],
            //   globalCoord: false,
            // },
            color: this.lineColor
          },
          label: {
            show: false
          },
          symbol: 'emptyCircle'
        }
      ]
    }
  }
}
